<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>AUI快速完成布局</title>
    <link rel="stylesheet" type="text/css" href="../css/aui.css" />
<style type="text/css">
html {
    _overflow: auto;
}

.slider{
  height: 260px;
  background-color: #ffffff;
}
html,  body {
    height:100%;

}

.echart {
    min-height: 250px;
}

.aui-content {
    height: 35px;
    min-height:35px;
    margin-left: 15px;
}
.aui-range{
  height: 35px;
  min-height:35px;
}
.aui-range-primary{
  width: 190px;
}
.ShowCh{
  display:inline;
  color:#00F;
  font-weight:bold;
}
.label{
    display: table-cell;
    vertical-align: middle;
    color: #f5f5f5;
    padding: 1px;
    text-align:center;
    font-family: "黑体";
    background-color: #4CAF50;
    white-space: nowrap;
    border-radius: 10%;
    margin: 1rem;
    font-size: 0.6rem;
    height: 1rem;
    width: 2.5rem;
}


</style>
</head>
  <body>
      <div id="echart"class="echart">

        <div id="chart" style="width: 100%;height:250px;"></div>
        <div style="display:table;width:100%;">
          <div style="width:50%;display:table;float: left;padding:3px">

              <div   id="cut" class="ShowCh" onclick="ChangeCh(this)"><</div>
              <div   id="showch" class="ShowCh">CH1</div>
              <div   id="plus" class="ShowCh" onclick="ChangeCh(this)" >></div>

          </div>
          <div style="padding:5px;    margin-right: 30px;display:table-cell;float:right">
            <span id="value" class="label"  onclick="SetValue(this)">设置</span>
          </div>
      </div>
      </div>
      <div id="slider" class="slider" style="overflow:scroll">



      </div>
  </body>
<script type="text/javascript" src="../script/api.js" ></script>
<script type="text/javascript" src="../script/aui-dialog.js" ></script>
<script type="text/javascript" src="../script/echarts.js" ></script>
<script type="text/javascript" src="../script/MyLib.js" ></script>
<script type="text/javascript">
var Rangevalue =new Array();//灯光亮度数组
for(var x=0;x<6;x++){
      Rangevalue[x]=new Array();        //声明二维数组
      for(var y=0;y<24;y++){
           Rangevalue[x][y]=50;          //数组初始化为0
      }
}
var Rangevalueflag = 1;
var dialog = new auiDialog();
var myChart = echarts.init(document.getElementById("chart"));
window.onload=function(){
  CreatRange('slider',25);
  if(Rangevalueflag==1){
    document.getElementById("plus").style.display='inline';
    document.getElementById("cut").style.display='none';
  }
  NewChar_line();
}

// e.style.display='none';
  function ChangeCh(e) {
    if(e.id=='plus'){
      if(Rangevalueflag<6){
        Rangevalueflag=Rangevalueflag+1;
      }
      }

    else{
      if(Rangevalueflag>1){
        Rangevalueflag=Rangevalueflag-1;
      }
    }
      var text ='CH'+Rangevalueflag;
      console.log(Rangevalueflag);
      document.getElementById("showch").innerHTML=text;
      if(Rangevalueflag==6){
        document.getElementById("plus").style.display='none';
        document.getElementById("cut").style.display='inline';

      }
      else if(Rangevalueflag==1){
        document.getElementById("plus").style.display='inline';
        document.getElementById("cut").style.display='none';

      }
      else {
        document.getElementById("plus").style.display='inline';
        document.getElementById("cut").style.display='inline';
      }

}
  function NewChar_line() {
    var Uint =new Array();
    for (var i = 0; i < 24; i++) {
      Uint[i]=i+'t';
    }
    var option = {
        title : {
            text: '未来一周气温变化',
            subtext: '纯属虚构'
        },
        tooltip : {
            trigger: 'axis'
        },
        //右上角工具条
        calculable : true,
        xAxis : [
            {
                type : 'category',
                boundaryGap : false,
                data : Uint,
            }
        ],
        yAxis : [
            {
                type : 'value',
                'min':0,
                'max':100,
                'splitNumber': 10 ,
            }
        ],
        series : [
            {
                name:'CH1',
                type:'line',
                data:Rangevalue[0],
            },
            {
                name:'CH2',
                type:'line',
                data:Rangevalue[1],
            },
            {
                name:'CH3',
                type:'line',
                data:Rangevalue[2],
            },
            {
                name:'CH4',
                type:'line',
                data:Rangevalue[3],
            },
            {
                name:'CH5',
                type:'line',
                data:Rangevalue[4],
            },
            {
                name:'CH6',
                type:'line',
                data:Rangevalue[5],
            }
        ]
      };
    myChart.setOption(option);
  }
  function refreshData(flag,Data){
       if(!myChart){
            return;
       }
        var option = myChart.getOption();
        option.series[flag].data = Data;
        myChart.setOption(option);
  }
  function uprange(e) {
    var i =e.id.substr(5,2);
    var name = 'text'+i;
    document.getElementById(name).value=e.value;
    Rangevalue[Rangevalueflag-1][i-1]=e.value;
    refreshData(Rangevalueflag-1,Rangevalue[Rangevalueflag-1]);
  }
  function upinput(e) {
    if(e.value<=100&&e.value>0){
      var i =e.id.substr(4,2);
      var name = 'range'+i;
      document.getElementById(name).value=e.value;

      Rangevalue[Rangevalueflag-1][i-1]=e.value;
      refreshData(Rangevalueflag-1,Rangevalue[Rangevalueflag-1]);
        }
    else{
      dialog.alert({
      title:"警告",
      msg:'输入超出限程！',
      buttons:['确定']},function(ret) {
        //console.log(ret);
      });
    }
    };

  function CreatRange(e,RangeNum){
      var html="";
      for(var i=1;i<RangeNum;i++){
        html += '<div class="aui-content ">'
            +'<div class="aui-range aui-col-xs-2" style="padding:10px;">'
            +'<span id="'+i+'show" class="aui-label aui-label-warning" style="display:table-cell;vertical-align:middle; color:#212121; background-color: #ffffff;font-family:"宋体">'+i+'时</span>'
            +'</div>'
            +'<div class="aui-range aui-col-xs-7" style="padding:10px;">'
            +'<input type="range" value="50" max="100" min="1" class="aui-range-primary" id="range'+i+'" onchange="uprange(this)"/>'
            +'</div>'
            +'<div class="aui-range aui-col-xs-2" style="padding:10px;">'
            +'<input id = "text'+i+'" type="text" name="fname" style="background-color: #ffffff;color:#212121;border: 1px solid #666666;border-radius: 15%;font-size: 0.7rem;text-align:center;"onchange="upinput(this)"/>'
            +'</div>'
            +'</div>'
      }
      document.getElementById(e).innerHTML = html;
    }
function SetValue(e) {
  console.log("ss");

}

</script>
</html>
